<template>
  <view class="custom-tab-bar-container" :style="{bottom: bangs_Height + 'px'}">
    <view class="navigator">
      <view class="navigator-item" v-for="(item,index) in customTabbar" :key="item.pagePath"
        @click="switchTab(index,item)">
        <view class="tab-icon iconfont"
          :style="{color: current === index ? item.iconfont.selectedColor : item.iconfont.color}">
          {{item.iconfont.text}}
        </view>
        <view class="tab-title" :style="{color: current=== index ? item.iconfont.selectedColor : item.iconfont.color}">
          {{item.text}}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from "vuex"
  import naviHeightMix from "@/mixins/get-NavigationBar_Height.js"
  export default {
    mixins: [naviHeightMix],
    computed: {
      ...mapState("m_tabbar", ["customTabbar"]),
      ...mapState("m_app", ["bangs_Height"])
    },
    // watch: {
    //   $route: {
    //     immediate: true,
    //     handler(to) {
    //       if (to.meta.isTabBar) { // 判断是否属于tarBar
    //         // this.__path__ = to.path
    //         // 判断路由的路径和tarBar.list的pagePath是否相同，来确定一个全局的index
    //         console.log(this);
    //         const index = this.list.findIndex(item => to.meta.pagePath === item.pagePath)
    //         if (index > -1) {
    //           this.current = index // 标记是第几个tarBar
    //         }
    //       }
    //     }
    //   }
    // },
    data() {
      return {
        current: uni.getStorageSync('current') || 0,
      }
    },
    mounted() {
      const pages = getCurrentPages()
      const path = pages[pages.length - 1].$page.fullPath.slice(1)
      this.customTabbar.forEach((v, i) => {
        if (path === v.pagePath) {
          this.current = i
          uni.setStorageSync('current', i);
        }
      })
    },
    methods: {
      switchTab: function(index, item) {
        let url = '/' + item.pagePath
        let pagePath = url
        uni.switchTab({
          url: pagePath
        })
        this.customTabbar.forEach((v, i) => {
          if (item.pagePath === v.pagePath) {
            uni.setStorageSync('current', index);
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .custom-tab-bar-container {
    position: fixed;
    left: 0;
    width: 100%;
    height: 100rpx;
    z-index: 99;

    .navigator {
      height: 100%;
      display: flex;

      .navigator-item {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex: 1;

        .tab-icon {
          font-size: 40rpx;
          line-height: 40rpx;
          color: #000;
          margin-bottom: 8rpx;
          margin-top: 8rpx;
        }

        .tab-title {
          font-size: 20rpx;
        }

        &:last-child {
          .tab-icon {
            font-size: 34rpx;
          }
        }
      }
    }
  }
</style>